<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'
import RoundedButton from "@/components/RoundedButton.vue";

onMounted(() => {
  initFlowbite();
})
</script>

<template>


  <div id="indicators-carousel" class="relative w-full" data-carousel="static">
    <!-- Carousel wrapper -->
    <div class="relative h-[420px] sm:h-[540px] overflow-hidden">
      <!-- Item 1 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item="active">
        <img src="/src/assets/bg-image.jpg" class="absolute block w-full h-full object-cover object-center -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
      </div>
      <!-- Item 2 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <img src="/src/assets/bg-image.jpg" class="absolute block w-full h-full object-cover object-center -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
      </div>
      <!-- Item 3 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <img src="/src/assets/bg-image.jpg" class="absolute block w-full h-full object-cover object-center -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
      </div>
      <!-- Item 4 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <img src="/src/assets/bg-image.jpg" class="absolute block w-full h-full object-cover object-center -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
      </div>
    </div>
      <!-- Carousel content-->
      <div class="info absolute z-30 w-full sm:w-1/3 bottom-[29%] sm:left-[17%] text-white">
        <div class="brand pb-1">
          <div class="createx flex flex-nowrap">
            <h1 class="text-[54px] font-black">CREATE</h1>
            <h1 class="text-[54px] font-black text-orange-500">X</h1>
          </div>
          <h1 class="text-[54px] font-black">CONSTRUCTION</h1>
        </div>
        <div class="description hidden sm:block whitespace-nowrap">
          <p>Cras ultrices leo vitae non viverra. Fringilla nisi quisque<br>consequat, dignissim vitae proin ipsum sed. Pellentesque nec<br>turpis purus eget pellentesque integer ipsum elementum felis.</p>
        </div>
        <div class="buttons pt-9 flex flex-nowrap space-x-6">
          <RoundedButton type="transparent-white">
              LEARN MORE ABOUT US
          </RoundedButton>
          <RoundedButton type="orange">
              SUBMIT REQUEST
          </RoundedButton>
        </div>
      </div>
      <!-- Slider indicators -->
      <div class="absolute z-30 flex -translate-x-1/2 space-x-1 rtl:space-x-reverse bottom-12 left-[42%] w-full md:w-1/2">
        <button type="button" class="w-1/5 text-left border-b bg-transparent hover:bg-transparent font-bold text-lg text-white/50 hover:text-white hover:border-white aria-current:text-white aria-current:border-white aria-current:bg-transparent aria-[current=false]:text-white/50 aria-[current=false]:hover:text-white aria-[current=false]:bg-transparent pb-2" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0">01</button>
        <button type="button" class="w-1/5 text-left border-b bg-transparent hover:bg-transparent font-bold text-lg text-white/50 hover:text-white hover:border-white aria-current:text-white aria-current:border-white aria-current:bg-transparent aria-[current=false]:text-white/50 aria-[current=false]:hover:text-white aria-[current=false]:bg-transparent pb-2" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1">02</button>
        <button type="button" class="w-1/5 text-left border-b bg-transparent hover:bg-transparent font-bold text-lg text-white/50 hover:text-white hover:border-white aria-current:text-white aria-current:border-white aria-current:bg-transparent aria-[current=false]:text-white/50 aria-[current=false]:hover:text-white aria-[current=false]:bg-transparent pb-2" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2">03</button>
        <button type="button" class="w-1/5 text-left border-b bg-transparent hover:bg-transparent font-bold text-lg text-white/50 hover:text-white hover:border-white aria-current:text-white aria-current:border-white aria-current:bg-transparent aria-[current=false]:text-white/50 aria-[current=false]:hover:text-white aria-[current=false]:bg-transparent pb-2" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3">04</button>
      </div>

    <!-- Slider controls -->
    <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60">
            <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
            </svg>
            <span class="sr-only">Previous</span>
        </span>
    </button>
    <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60">
            <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <span class="sr-only">Next</span>
        </span>
    </button>
  </div>
</template>

<style scoped>

</style>